<template>
  <div style="padding: 10px">
    <t-card title="物料">
      <div style="display: flex">
        <t-form label-align="right" layout="inline" label-width="80px">
          <t-form-item label="项目编号" name="FBillNo">
            <t-input v-model="formData.FBillNo" placeholder="请输入项目编号" />
          </t-form-item>
          <t-form-item label="工单编号" name="FMOBillNO">
            <t-input v-model="formData.FMOBillNO" placeholder="请输入工单编号" />
          </t-form-item>
          <t-form-item label="产品编码" name="FMaterialNumber">
            <t-input v-model="formData.FMaterialNumber" placeholder="请输入产品编码" />
          </t-form-item>
          <t-form-item label="产品名称" name="FMaterialName">
            <t-input v-model="formData.FMaterialName" placeholder="请输入名称" />
          </t-form-item>
        </t-form>
        <t-space align="end" style="align-self: flex-end">
          <t-button theme="primary" @click="clickQuery">查询</t-button>
        </t-space>
      </div>
    </t-card>
    <t-card title="">
      <t-space align="end" style="display: flex; justify-content: center">
        <t-button variant="outline" theme="primary" @click="clickBuy">物料申购</t-button>
        <t-button variant="outline" theme="primary" @click="clickSave">暂存</t-button>
      </t-space>
    </t-card>

    <div style="margin-top: 10px; display: flex; flex-direction: column">
      <t-space align="end" style="align-self: flex-end">
        <!-- <t-button theme="primary" @click="clickUpload">上传excel</t-button> -->
        <t-button variant="outline" theme="primary" @click="clickExport">excel导出</t-button>
      </t-space>
      <t-table
        row-key="FID"
        :data="dataList"
        :columns="columns"
        :resizable="true"
        :loading="loading"
        :stripe="stripe"
        :selected-row-keys="selectedRowKeys"
        :active-row-type="single"
        :select-on-row-click="true"
        bordered
        :hover="true"
        table-layout="auto"
        size="small"
        :pagination="pagination"
        cell-empty-content="-"
        resizable
        lazy-load
        @select-change="rehandleSelectChange"
        @row-click="handleRowClick"
      >
        <template #FBillNo="{ rowIndex, row }">
          <t-link theme="primary" @click="handleRowClick($event, rowIndex, row)">
            {{ row['FNumberShow'] ? row['FBillNo'] : '' }}
          </t-link>
        </template>

        <template #FMaterialNumber="{ rowIndex, row }">
          <span style="">{{ row['FNumberShow'] ? row['FMaterialNumber'] : '' }}</span>
        </template>

        <template #FMOBillNO="{ rowIndex, row }">
          <span style="">{{ row['FNumberShow'] ? row['FMOBillNO'] : '' }}</span>
        </template>

        <!-- <template #operation="{ row }">
          <t-button theme="primary" hover="color" @click="handleClickEdit($event,row)"> 编辑 </t-button>
        </template> -->
      </t-table>
    </div>

    <detail ref="detailRef" @update-data="loadData" />
    <uploadDialog ref="uploadRef" :dl-url="filePrefix + 'pbom.xlsx'" />
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { columns } from './columns/index';
import { queryMbomList, exportData } from '@/service/mbom';
import uploadDialog from '@/components/uploadDialog/index.vue';
import { downloadRes } from '@/common/download';

import Detail from './components/detail.vue';
import router from '@/router';

export default {
  components: { Detail, uploadDialog },
  setup(props) {
    const formData = reactive({ FMaterialID: '' });
    // const formData = reactive({ FMaterialID: 111204, FDocumentStatus: '', FName: '伺服电机' })
    const detailRef = ref();
    const total = ref(300);
    const loading = ref(false);
    const selectedRowKeys = ref([]);
    const uploadRef = ref();

    const curr_page = ref(1);
    const page_size = ref(10);

    const dataList = ref([]);
    const pagination = computed(() => {
      return {
        defaultCurrent: 1,
        defaultPageSize: page_size.value,
        total: total.value,
        onChange: (pageInfo) => {
          const { current, pageSize } = pageInfo;
          curr_page.value = current;
          page_size.value = pageSize;
          loadData();
        },
      };
    });

    const clickQuery = () => {
      curr_page.value = 1;
      loadData();
    };

    const rehandleSelectChange = (value, { selectedRowData }) => {
      selectedRowKeys.value = value;
      console.log('rehandleSelectChange', selectedRowData);
    };
    const handleRowClick = (e, rowIndex, row) => {
      console.log(e);
      e.stopPropagation();
      router.push({ name: 'mbomEdit', params: { id: row.FBillNo } });
    };

    const handleClickEdit = (e, row) => {
      e.stopPropagation();
      router.push({ name: 'mbomEdit', params: { id: row.FBillNo } });
    };

    const clickAdd = () => {
      // console.log('detailRef', detailRef);
      // detailRef.value.openModal();
      router.push({ name: 'materialAdd' });
    };

    const clickUpload = () => {
      uploadRef.value.openExcelDialog();
    };

    const loadData = async () => {
      loading.value = true;
      const res = await queryMbomList({
        ...formData,
        curr_page: curr_page.value,
        page_size: page_size.value,
      });
      dataList.value = res.dataList;
      let last_fnumber = null;
      let item_index = 1;
      for (let index = 0; index < dataList.value.length; index++) {
        const item = dataList.value[index];
        if (!last_fnumber || last_fnumber != item.FBillNo) {
          item.FNumberShow = true;
          item_index = 1;
        }
        item.index = item_index;
        last_fnumber = item.FBillNo;

        item_index++;
      }

      // total.value = res.length;
      total.value = res.total;
      console.log('res', res);
      loading.value = false;
    };

    const clickExport = async () => {
      const res = await exportData({
        ...formData,
        // curr_page: curr_page.value,
        // page_size: page_size.value,
      });

      downloadRes('MBOM', res);
    };
    const clickSave = () => {};

    const clickBuy = () => {
      if (!selectedRowKeys.value[0]) {
        MessagePlugin.closeAll();
        MessagePlugin.error('未选择条目！');
        return;
      }
      router.push({
        name: 'materSubscribe',
        params: {
          isMbom: 'Y',
          bomIds: selectedRowKeys.value.join(','),
        },
      });
    };

    onMounted(() => {
      loadData();
    });

    return {
      detailRef,
      columns,
      pagination,
      total,
      formData,
      dataList,
      loadData,
      handleClickEdit,
      loading,
      clickAdd,
      handleRowClick,
      curr_page,
      page_size,
      selectedRowKeys,
      rehandleSelectChange,
      clickExport,
      clickBuy,
      clickSave,
      uploadRef,
      clickUpload,
      clickQuery,
    };
  },
};
</script>
